JavaScript DOM | Window Object - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

2021 iThome 鐵人賽

DAY 26

自我挑戰組

開始入坑網頁吧!系列第 26 篇

JavaScript DOM | Window Object

13th鐵人賽 dom js javscript window

阿沁

2021-10-10 23:46:52

888 瀏覽

分享至

使用Window 的方法可以省略掉 Window 字眼
EX:

window.alert('Hi!');//Hi!
alert('Hi!');//Hi!

setInterval() 與 clearInterval()

setInterval() 方法可按照指定的週期 (以毫秒計) 呼叫某函式。
setInterval() 會不斷調用函數，直到 clearInterval() 被呼叫或 Window 被關閉。

語法:
setInterval(函數,毫秒);

EX:

function sayHi(){
setInterval(function(){
alert('Hi!');
},1000)
};

sayHi();//每秒都會 alert 'Hi!'

下面是使用 clearInterval()

<!DOCTYPE html>
<html>
<body>



<p id="demo"></p>

<button onclick="myStopFunction()">Stop</button>

<script>
var myVar = setInterval(num, 1000);
var d=0;
function num() {
  d++;
  document.getElementById("demo").innerHTML = d;
}

function myStopFunction() {
  clearInterval(myVar);
}
</script>

</body>
</html>

如果用 addEventListener() 註冊事件

語法document.addEventListener(觸發事件, 觸發時執行的函數, useCapture[可選])
上面的範例用 addEventListener() 可以這樣寫:

<!DOCTYPE html>
<html>
<body>



<p id="demo"></p>

<button>Stop</button>

<script>
var myVar = setInterval(num, 1000);
var d=0;
function num() {
  d++;
  document.getElementById("demo").innerHTML = d;
}

document.querySelector("button").addEventListener("click",myStopFunction);

function myStopFunction() {
  clearInterval(myVar);
}
</script>

</body>
</html>

參考資料:
W3schools | Window clearInterval() Method

W3schools Window | setInterval() Method

W3schools | document.addEventListener() Method